Web senza barriere 2008

Strumenti per la valutazione dell’accessibilità

Ing. Adamo Liberto
Ufficio Accessibilità dei Sistemi Informatici

La valutazione dell’accessibilità 

Quando valutare?

•	Nella fase di progettazione (obiettivi, architettura del sito, grafica, requisiti di sistema)
•	Nella fase di sviluppo (prototipo, contenuti, ambiente informatico di sviluppo)
•	Collaudo (contenuti, tecnico:funzionalità e prestazioni)
•	Pubblicazione (ambiente informatico di produzione, contenuti, motore di ricerca link)
•	Manutenzione e promozione (sistema HW e SW, contenuti e posizionamento)

La valutazione dell’accessibilità

•	Il ciclo della valutazione

•	Validazione del codice
•	Validazione semiautomatica
•	Analisi dell’esperto 
•	Analisi con l’utente 

Prima, validare il codice

•	Requisito di base per poter parlare di accessibilità e’ la correttezza formale del codice della pagina, il rispetto della sintassi che deve essere dichiarata nella DTD (Document Type Definition)

•	Il documento deve rispettare gli standard del w3c

•	(X)HTML, CSS(Cascading Style Sheets): documentazione e specifiche: 
•	http://www.w3.org/TR/xhtml1/
•	http://www.w3.org/TR/html401/
•	http://www.w3.org/TR/REC-CSS2/ 
•	http://www.w3.org/TR/1999/REC-CSS1-19990111 

Strumenti semiautomatici per la valutazione

Elenco dei principali tool di validazione semiautomatica

validatore webxact della watchfire 

Cynthia tested 

A-Prompt 

Sidar 

ATCR ATRC Adaptive Technology Resource Center

Wave 3.0 Web Accessibility tool 

Strumenti semiautomatici per la valutazione

Il report generato contiene:
•	Errori
	Tutto quello che è verificabile automaticamente, per es… 
o	Presenza dell’attributo Alt
o	Errori sintattici

•	Possibili errori (warning)
o	Richiedono il giudizio umano per es… 
o	Controllare che disabilitando i fogli di stile la pagina risulti leggibile
o	Contenuto degli attributi Alt… 
o	Contenuto degli attributi Title… 

Strumenti semiautomatici per la valutazione

•	Nessuno strumento semi-automatico può stabilire se una pagina è accessibile o meno!!!

•	Dei 65 punti di controllo presenti nelle WCAG 1.0, solo 19 possono essere valutati automaticamente

•	Dei 21 requisiti tecnici del DM 8 luglio 2005 della Legge 04/2004 solo 7-8 possono essere valutati automaticamente

Analisi dell’esperto

•	Approccio metodologico

•	Competenza tecnica

•	Giudizio umano (spesso soggettivo)
•	Familiarità con tecnologie assistive

•	Analisi dettagliata dei requisiti anche sfruttando i tanti strumenti di valutazione (gratuiti e non)esistenti

•	Provare a navigare le pagine utilizzando diverse configurazioni hardware e software (vari SO e browser)

Analisi centrata sull’utente

•	Utenti sono i veri fruitori dei siti web

•	Le competenze degli utenti disabili nell’uso di tecnologie assistive non sono facilmente simulabili

•	Le strategie di navigazione sono molto diverse in funzione della disabilità

•	Le tecnologie assistive si evolvono rapidamente

•	Difficile simulare i problemi cognitivi degli utenti

o	Utenti anziani

o	Utenti sordi

o	Utenti con disabilità cognitive

Analisi centrata sull’utente

Analisi basata su:

•	Percezione dell’accessibilità
•	Comprensione della struttura del sito
•	Raggiungibilità delle informazioni

La valutazione dell’accessibilità

•	Il lavoro di tutti i giorni: l’accessibilità come strumento, come approccio metodologico, come modus operandi  non solo come conclusione di un processo

Strumenti di lavoro più conosciuti

•	Lynx 

•	Web Developer Toolbar & Extensions, Web Accessibility Toolbar, Opera Web Developer Toolbar & Menu

•	Colour Contrast Analyser & Juicy Studio Contrast Analyzer 

Lynx

•	E’ un browser testuale: non supporta immagini, tabelle, script, mouse, …

•	Mostra l’organizzazione, la struttura ed il contenuto di una pagina web secondo la sequenza degli elementi del linguaggio a marcatori utilizzato

•	Scaricabile all’indirizzo: http://lynx.browser.org/ 
Oppure http://csant.info/lynx.htm, per una versione con file di installazione.

Strumenti di lavoro:  Web Developer Extension-1

•	Document Map. 
Permette di visualizzare in una barra laterale (Visualizza > Barra laterale > Document Map) la struttura (navigabile) degli headers nella pagina. Molto pratica per verificare la struttura del contenuto. Equivale un po' a farsi leggere da Jaws l'elenco dei titoli. https://addons.mozilla.org/it/firefox/addon/475 

•	 Firefox Web Developer Toolbar 
Molti strumenti utili per le verifiche, incluso linearizzazione della pagina, evidenziazione di tabelle e ordine di sovrapposizione, https://addons.mozilla.org/it/firefox/addon/60 

•	Mozilla Accessibility Extension 
	Duplica alcune funzionalità della Web Developer ma ha anche alcune funzioni uniche, ad esempio oltre a rimuovere solo i CSS rimuove anche tutti i tag presentazionali e le tabelle di layout, permette di visualizzare l’ordine, il livello e il testo delle intestazioni (hx) oppure per esempio permette di verificare il sito con differenti contrasti selezionando Style > High Contrast View 1 e 2.
	https://addons.mozilla.org/it/firefox/addon/1891

•	Verifica colori (oltre l'algoritmo): VIS, Visual Impairment Simulator, permette di simulare a video la visualizzazione che si presenta agli utenti che soffrono delle più diffuse patologie visive.
	http://www.cita.uiuc.edu/software/vis/

•	Accessibar permette di cambiare in maniera molto semplice il tipo di font, il colore di background sia di testo che di link, fornisce inoltre un output vocale simulando un text to speach 
	https://addons.mozilla.org/it/firefox/addons/previews/4242

•	Fangs - Screen Reader Emulator. E’ una estensione di Firefox che da in output una rappresentazione testuale delle pagine web così come verrebbe letto da  uno screen reader, offrendo la possibilità di consultare ad esempio  la lista dei link, la lista degli headings.
http://sourceforge.net/projects/fangs 

•	HTML Validator is a Mozilla extension that adds  HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of  an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page. Both algorithms were originally developed by the Web Consortium W3C. 
	http://users.skynet.be/mgueury/mozilla/download.html 

Analisi dei requisiti di accessibilità tramite gli strumenti di verifica tecnica

•	Web Accessibility Toolbar per Internet Explorer http://www.webaccessibile.org/argomenti/argomento.asp?cat=474 

•	Web Developer Extension e Mozilla Accessibility Extension per Firefox https://addons.mozilla.org/it/firefox/addon/60 https://addons.mozilla.org/it/firefox/addon/1891 

Requisito 1: Correttezza sintattica e semantica del codice

Web Accessibility Toolbar per Internet Explorer

•	Validatore HTML del W3C 
•	Valida l'HTML 
•	Validatore HTML - WDG 
•	Valida l'HTML
•	Valida tutto il sito 
•	Validatore CSS del W3C 
•	Valida il CSS
•	Informazioni Meta 
•	Visualizza DOCTYPE 
•	Struttura 
•	Intestazioni
•	Struttura delle intestazioni 
•	JavaScript / Apertura di nuove finestre
•	Codice 
•	Elementi e attributi HTML deprecati 

Web Developer Extension e Mozilla Accessibility Extension per Firefox 

•	Tools 
•	Validate HTML validator 
•	Validate HTML tidy 
•	Validate local HTML
•	Validate CSS
•	View 
•	View source
•	Outline 
•	Headings 
•	Deprecated Elements 

Requisito 2: Frame

Web Accessibility Toolbar per Internet Explorer
•	Struttura
•	Nome/titolo dei frame
•	Informazione Meta
•	Elenco dei frame
 
•	Codice
•	Elementi ed attributi HTML deprecati

Web Developer Extension e Mozilla Accessibility Extension  per Firefox 

•	View source
•	View  generated source
•	Outline 
•	Outline Frame/deprecated elements 

Requisito 3: Alternative testuali equivalenti

Web Accessibility Toolbar per Internet Explorer
•	Immagini
•	Elenco delle Immagini utilizzate
•	Alterna Immagini / Testi alternativi
•	Visualizza le immagini

Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	Image 
•	Disable Image 
•	Display alt attribute 
•	Text Equivalent 
•	List of image 
•	Show text equivalent 

Requisito 4: colore che veicola informazione

Web Accessibility Toolbar per Internet Explorer
•	colori
•	scala dei grigi
•	simulazioni
•	CSS
•	Disattiva CSS

Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	Disable 
•	Disable page color

Requisito 5: Oggetti in movimento e scritte lampeggianti

Web Accessibility Toolbar per Internet Explorer
•	immagini
•	analizza frequenze gif animate

Web Developer Extension e Mozilla Accessibility Extension per Firefox  
•	Image 
•	Disable image/animations

Requisito 6: Contrasto del colore e della luminosità

Web Accessibility Toolbar per Internet Explorer
•	colori
•	Analisi del contrasto>Color Contrast Analyzer- Juice Studio
•	Strumenti>Simulazioni>Alterazione percettiva dei colori
•	Strumenti>Simulazioni>Alterazione percettiva dei contrasti

Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	view 
•	Color Information

•	
Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	Disable 
•	Disable page color

Requisito 7-8: mappe immagine lato client e lato server

Web Accessibility Toolbar per Internet Explorer
•	immagine
•	Visualizza mappe immagine

Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	navigation
•	image maps

Requisito 11: fogli di stile

Web Accessibility Toolbar per Internet Explorer
•	CSS
•	Disattiva CSS
•	Struttura 
visualizza ordine di tabulazione

Web Developer Extension e Mozilla Accessibility Extension per Firefox
 
•	CSS
•	Disable CSS> All Style
•	Style
•	Disable tag styling

Requisito 12: ridimensionamento finestra del browser/caratteri

Web Accessibility Toolbar per Internet Explorer
•	Ridimensiona
•	800x600
•	Visualizza
•	Grandezza caratteri- Carattere molto grande/molto piccolo

Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	Resize
•	Windows>800x600
•	Zoom>Zoom In-Zoom Out

Requisito 13: tabelle di layout

Web Accessibility Toolbar per Internet Explorer
•	Struttura
•	Tabelle dati complesse
•	Linearizza(Rimuovi tabelle)
•	Ordinamento delle celle in tabella

Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	Miscellaneus 
•	Linearize page 
•	Information
•	Display table information

Requisito 14: form accessibili

Web Accessibility Toolbar per Internet Explorer
•	Struttura
•	Elementi fieldset e legend

Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	Form
•	Display form details 
•	View form information
•	Navigation
•	Form elements 

Requisito 15-16-17: script, applet, oggetti di programmazione

Web Accessibility Toolbar per Internet Explorer

•	Informazioni Meta
•	Elenco di script e applet
•	Struttura
•	Gestori di eventi
•	Opzioni IE
•	Attiva / Disattiva Javascipt, ActiveX 

Web Developer Extension e Mozilla Accessibility Extension  per Firefox 
•	Information
•	View Javascript 
•	Disable  
•	Disable  scripting 
•	Disable mouse scripting 
•	List of events 

Requisito 18: multimedia accessibile

Web Accessibility Toolbar per Internet Explorer
•	Informazioni Meta
•	Elenco dei file multimediali

Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	Information
•	View Information Page > Media

Requisito 19: link significativi e meccanismi di salto

Web Accessibility Toolbar per Internet Explorer
•	Informazioni Meta
•	Elenco ei collegamenti ipertestuali
•	Visualizza attributo Title
•	Visualizza link interni

Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	Information
•	Display title attributes 
•	View anchor 
•	View anchor information
•	Outline 
•	Outline Links>External Links 
•	Outline Links>External Links without title attributes 
•	View anchor 
•	View anchor information

Requisito 20: refresh delle pagine

Web Accessibility Toolbar per Internet Explorer
•	Informazioni Meta
•	Informazioni Metadata ( cercare la presenza di refresh)

Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	Information
•	Display metaTag ( cercare la presenza di refresh)
•	Scripting 
•	Disable automatic refresh 

Requisito 21: link spaziati, navigabilità da tastiera

Web Accessibility Toolbar per Internet Explorer
•	CSS
•	Visualizza il foglio di stile
Web Developer Extension e Mozilla Accessibility Extension per Firefox 
•	Information
•	Show Accesskey 
•	Display Div Order 
•	Keyboard
•	Keyboard shorthcut Options
 
Controllare che tramite il tasto TAB della tastiera si riescano a scorrere sequenzialmente tutti i link presenti nella pagina

E per concludere…una dimostrazione:

Dal sito del W3C:Demo di uno stesso sito realizzato in  2 versioni: accessibile e inaccessibile
http://www.w3.org/WAI/EO/2005/Demo/Overview
  
•	Requisito 1:validazione sintattica e semantica del codice:
•	Validazioni: valida HTML, valida CSS
•	Requisito 3:alternativa testuale equivalente alle immagini 
•	Immagini: elenco delle immagini utilizzate, alterna immagini/testi alternativi
•	Requisito 11: corretto utilizzo dei fogli di stile
•	CSS: disattiva/attiva i CSS
•	Requisito 12: dimensionamento carattere/fluidità layout
•	ridimensiona: 800 x 600 (impostando carattere “molto grande” dal menu visualizza – carattere di Internet Explorer)
•	Requisito 14: accessibilità dei moduli
•	Struttura: elementi fieldset/labels 
•	Requisito 19:testi significativi per i link e meccanismi di salto
•	Informazioni Meta: elenco dei collegamenti ipertestuali, visualizza attributo title,visualizza link interni

Per ulteriori informazioni:

www.pubbliaccesso.gov.it  

adamo.liberto@cnipa.it  

Logo accessibilità previsto dalla legge 04/2004